.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

$size: 0, 2, 5, 10 ,20, 50, 100;
$position: 'top', 'left' ,'bottom', 'right';

@each $i in $size {
  .m-#{$i} {
    margin: #{$i}px;
  }
  .margin-#{$i} {
    margin: #{$i}px;
  }
  .p-#{$i} {
    padding: #{$i}px;
  }
  .padding-#{$i} {
    padding: #{$i}px;
  }
  @each $p in $position{
    .margin-#{$p}-#{$i} {
      margin-#{$p}: #{$i}px;
    }
    .m#{str-slice($p,0,1)}-#{$i} {
      margin-#{$p}: #{$i}px;
    }
    .padding-#{$p}-#{$i} {
      padding-#{$p}: #{$i}px;
    }
    .p#{str-slice($p,0,1)}-#{$i} {
      padding-#{$p}: #{$i}px;
    }
  }
}
